<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<c:set var="base" value="${pageContext.request.contextPath}"/>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>设备管理</title>
  <link href="${base}/assets/css/iconfont.css" rel="stylesheet">
  <link href="${base}/assets/css/public.css" rel="stylesheet">
  <link href="${base}/assets/css/list.css" rel="stylesheet">
  <script src="${base}/assets/js/jquery.min.js"></script>
  <script type="text/javascript" src="${base}/assets/js/jquery.PrintArea.js"></script>
  <link rel="stylesheet" type="text/css" href="${base}/assets/easyui/themes/gray/easyui.css" />
	<link rel="stylesheet" type="text/css" href="${base}/assets/easyui/themes/icon.css" />
	<script type="text/javascript" src="${base}/assets/easyui/jquery.easyui.min.js"></script>
	<script type="text/javascript" src="${base}/assets/easyui/locale/easyui-lang-zh_CN.js"></script>
	<script type="text/javascript" src="${base}/assets/js/zingchart.min.js"></script>
  <style>
	#pageshow{
		height:40px;
		padding-left: 30%;
	}
	#pageshow a{
		float:left;
		    text-decoration: none;
		font-family: consolas;
	}
	#pageshow span{
		margin-left: 5px;
		font-size: 15px;
	}
	#pageshow input{
		width: 25px;
	}
	
	#pagenum{
		float:left;
	}
	#printdiv span{
		
	}
	#printdiv img{
		margin: 10px 0;
	}
	.black_overlay{
		display: none;
		position: absolute;
		top: 0%;
		left: 0%;
		width: 100%;
		height: 100%;
		background-color: black;
		z-index:1001;
		-moz-opacity: 0.8;
		opacity:.85;
		filter: alpha(opacity=85);
	}
	.white_content {
		display: none;
		position: fixed;
		top: 10%;
		left: 10%;
		width: 80%;
		height: 80%;
		
		background-color: white;
		z-index:1002;
		overflow: auto;
	}
	.white_content_small {
		display: none;
		position: absolute;
		top: 20%;
		left: 30%;
		width: 40%;
		height: 50%;
		border: 16px solid lightblue;
		background-color: white;
		z-index:1002;
		overflow: auto;
	}
	.textbox{
		height: 30px !important;
		margin: 0 !important;
	}
	.textbox .textbox-addon{
		margin: 0;
	}
	#statisticstab tbody tr td{
		padding: 0;
	}
	#statisticstab table{
		width: 100%;
	}
	#statisticstab{
		margin: 0 auto;
		cursor: pointer;
	}
	#statisticstab table tbody tr:first-child td{
		color: #fff;
		text-align: center;
		border-bottom: 2px solid #999;
		background-color: #337ab7;
	}
	#statisticstab table tbody tr td{
		padding: 5px;
	}
	#statisticscdid{
		text-align: center;
	}
	#cdidstatisticstab{
		width: 500px;
		border: 2px solid #999;
		border-bottom: none;
	}
	#cdidstatisticstab th,#cdidstatisticstab td{
		padding: 5px;
		border-bottom: 2px solid #999;
	}
	#cdidstatisticstab th{
		color: #fff;
		background-color: #337ab7;
	}
	#dicddetail{
		background-color: #ebeaea;
	}
	#pageshow{
		padding: 20px 0 20px 5%;
		text-align: left;
	}
	#sample_editable_1 th{
		padding: 5px;
	}
</style> 
</head>
<body>
<input type="hidden" id="pageNo" value="${pageNo}"/>
<div class="top">
<c:import url="../commons/top.jsp"/>
</div>
<div class="wrap">

  <div class="side">
  <c:import url="../commons/sidebar.jsp"/>
  </div>
  <div id="statistics" class="cont" style="position:retative;">
  		<div id="titlename" style="position:relative;margin-top:50px;line-height: 60px;font-size:30px;text-align: center;padding: 20px 0;">
  		   <div id="titlename2"></div>
  		   <div class="excel-add" style="position:absolute;right:8px;top:30px;">
		        <a id="statusbtn" class="add" href="javascript:void(0)" onclick="" style="background-color:#337ab7;color:red;">返回</a>
		   </div> 
  		</div>
	    
		<table id="statisticstab" width="1400px" border="0" cellspacing="0" cellpadding="0" bordercolor="#999" class="list" style="padding: 10px 5px;border:1px solid #666;">	
	   	</table>
	   	<div id="statisticscdid">
			<div style="display: inline-block;margin:0 15px;vertical-align: top;">
				<table id="cdidstatisticstab" border="0" cellspacing="0" cellpadding="0">
					<thead>
					</thead>
					<tbody>
					</tbody>
	    	    </table>
			</div>
			<div style="display: inline-block;margin:0 15px;vertical-align: top;">
				<div id="chartDiv"></div>
			</div>
		</div>
		<div id="dicddetail" style="">
			<div class="btn-site" style="height: 30px;padding-left: 110px;">
		      <ul>
		        <li class="on" onclick="seachfl('1');" id="1">正常</li>
		        <li onclick="seachfl('2');" id="2">出库</li>
		        <li onclick="seachfl('3');" id="3">报废</li>
		      </ul>
    	    </div>
    	    <div class="clearfix" style="width:85%;margin:0 auto;">    	    	
    	    	<div style="float:left;vertical-align: top;width:60%;">    	    
					<table id="sample_editable_1" width="100%" border="1" cellspacing="0" cellpadding="0" bordercolor="#e9e9f0" class="list" style="">
				      <thead>
				      
				        <tr style="background-color:#ccc;">
				            <th>设备类别</th>
				            <th>投产年月</th>
				        	<th>编    号</th>
							<th>折旧年限</th>			    
							<th>采购价格</th> 
							<th>状    态</th> 
				         </tr>
				      </thead>
				      <tbody>
				      </tbody>
				    </table>
			    </div>
			    <div style="float:left;vertical-align: top;width:40%;">				    
				    <div style="text-align: center;">
				    	<div id="chartDiv2" style="display: inline-block;vertical-align: top;"></div>
				    </div>	
				    <div style="text-align: center;margin-top:30px;">
				    	<div style="display: inline-block;">
					    	<table id="sample_editable_2" style="margin:0 auto;">
						      <thead>
						        <tr style="background-color:#ccc;">
						            <th>图表编号</th>
						            <th>投产年月</th>
						         </tr>
						      </thead>
						      <tbody>
						      </tbody>
						    </table>
					    </div>
				    </div>	    
			    </div>
			    
			</div>    
			<div id="pageshow">
				<a id="btn0"  style="font-size: 16px;margin-right:15px;"></a>
				<a href="#" id="btn1"  title="首页" style="font-size: 18px;margin-right:15px;"> << </a>
				<a href="#" id="btn2"  title="上一页" style="font-size: 18px;margin-right:15px;"> < </a>
				<div id="pagenum" ></div>
				<a href="#" id="btn3"  title="下一页" style="font-size: 18px;margin-right:15px;">&nbsp; > </a>
				<a href="#" id="btn4"  title="末页" style="font-size: 18px;margin-right:15px;"> >> </a>
				<a id="sjzl"  style="font-size: 16px;"></a>
				<span>跳转</span><input type="text" id="gopage"/><span>页</span><button id="gopagebtn" style="font-size: 14px"> go </button>
			</div>    
			    
			    
				
			  			  
		</div>
   </div>
</body>
<script type="text/javascript">
var statu=1;
var pageSize = 20;    //每页显示的记录条数
var curPage=1;        //当前页
var page;            //总页数
var tapnum=10;		 //显示分页标签的个数
var pagetag = new Array();
var curdcid=0;
var curwid =0;
$(function(){
	$('.btn-site ul li').each(function(){
	     if($(this).attr("id") == statu)
	    	$(this).addClass('on').siblings().removeClass('on');
	  });
    displaystatics();
});
function displaystatics(){
	$.ajax({
	  type: "POST",
	  dataType: "json", // 数据格式:JSON
	  url: '${base}/backstatistics/findddlist.do',
	 // data: {pageNo:cpnum},
	  success: function (data) {
	 	if(data.backdata != null){
	 		$("#statisticstab").show();
			$("#statisticscdid").hide();
			$("#dicddetail").hide();
			$("#statusbtn").hide();
			$("#statisticstab").html("");
			$("#titlename2").html("设备出入库总览")
			var hangsu=0;
			var hangstr="";
			var item ="";
			$.each(data.backdata,function(i,result){
				hangsu++;
				item+='<td onclick="clickcangku('+result["wid"]+')">'+
						'<div style="margin: 10px 20px 10px 10px;border:1px solid #666;">'+				
							'<table border="0" cellspacing="0" cellpadding="0">'+
								'<tr><td colspan="2">'+'位置:&nbsp;&nbsp;&nbsp;&nbsp;'+result["whname"]+'</td></tr>'+
								'<tr>'+
									'<td style="">'+'设备类数:  '+result["cdls"]+'</td>'+
									'<td style="">'+'设备总数:  '+result["cdcnt"]+'</td>'+
								'</tr>'+
								'<tr>'+
									'<td style="color:blue;">'+'在库总数:  '+result["ins"]+'</td>'+
									'<td style="color:green;">'+'出库总数:  '+result["outs"]+'</td>'+
								'</tr>'+
								'<tr>'+
									'<td style="color: red;">'+'报废设备:  '+result["diss"]+'</td>'+
								'</tr>'+
							'</table>'+
						'</div>'+
					'</td>';
				if(hangsu%4==0){
					hangstr = '<tr>'+item+'</tr>'
					$("#statisticstab").append(hangstr);
					hansu=0;
					hangstr="";
					item ="";
				}				
            	
            })
		} 
	  }
	});
};

function clickcangku(wid){
	curwid = wid;
	$.ajax({
	  type: "POST",
	  dataType: "json", // 数据格式:JSON
	  url: '${base}/backstatistics/findwidsdd.do',
	  data: {wid:wid},
		success: function (data) {
			if(data.backdata != null){
				$("#statusbtn").html("返回");
		 		$("#statusbtn").attr("onclick","statusbtnclick(2,0);");
		 		$("#statusbtn").show();
		 		
				$("#statisticstab").hide();
				$("#statisticscdid").show();
				$("#dicddetail").hide();
				$("#cdidstatisticstab thead").html("");
				$("#cdidstatisticstab tbody").html("");	
				var item ='<tr>'+
							'<th>图表序号</th>'+
							'<th>分类名称</th>'+
							'<th>入库总数</th>'+
							'<th>出库总数</th>'+
							'<th>报废总数</th>'+
							'<th>操    作</th>'+
						 '</tr>'
				$("#cdidstatisticstab thead").append(item);	
				var temp =[];
				$.each(data.backdata.datalist,function(i,result){
					var item2='<tr>'+
								'<td>'+(i+1)+'</td>'+
								'<td>'+result["dcname"]+'</td>'+
								'<td style="color:blue;">'+result["ins"]+'</td>'+
								'<td style="color:green;">'+result["outs"]+'</td>'+
								'<td style="color:red;">'+result["diss"]+'</td>'+
								'<td><a href="javascript:void(0)" onclick="clickdicddetail('+result["dcid"]+')">详情</a></td>'+
								'</tr>';
					$("#cdidstatisticstab tbody").append(item2);
					temp[i]=i+1;
				});
				if(data.backdata.cdlist!=null){
					chartData["scale-x"]["values"]=temp;//data.backdata.cdlist;
				}
				if(data.backdata.series!=null){
					chartData["series"].length =0;
					$.each(data.backdata.series,function(i,result){
						chartData["series"].push({"values":result["data"],"text":result["name"]})
					});
				}
				if(data.backdata.whname!=null){
					chartData["title"]["text"]="";
					chartData["title"]["text"]= data.backdata.whname+"出入库统计";
					$("#titlename2").html(data.backdata.whname+"设备统计");
				}
				zingchart.render({   
		            id: "chartDiv",      
		            height: 600,         
		            width: 1000,          
		            data: chartData 
		        });
			}
		}
	});
}
function seachfl(val){
	$('.btn-site ul li').each(function(){
	     if($(this).attr("id") == val)
	    	$(this).addClass('on').siblings().removeClass('on');
	  });
	statu=val;
	curPage=1;
	displayPage(display);
}
function clickpx(type){
	pxtype=type;
	displayPage(null);
}
function clickdicddetail(dcid){
	//console.log("dcid::"+dcid)
	$("#statisticstab").hide();
	$("#statisticscdid").hide();
	$("#dicddetail").show();
	curdcid = dcid;
	$("#statusbtn").html("返回");
	$("#statusbtn").attr("onclick","statusbtnclick(1,0);");
	$("#statusbtn").show();
	displayPage(display);
}
var len=0
function display(){//load时
	   // 求这个表的总行数，剔除第一行介绍
    page= (len % pageSize==0) ? (len/ pageSize): (Math.floor(len/pageSize)+1);//根据记录条数，计算页数
    curPage=curPage;    // 设置当前为第一页
    $("#pagenum").html("");
	for (var i = 1; i <= tapnum; i++) {
		$("#pagenum").append('<button id="dqjm_'+i+'" style="font-size: 14px"></button>');
		$("#dqjm_" + i).hide();
	}
	var bnum=0;
	var ednu=0;
	if(page<=tapnum){
		bnum=1
		ednu=page;
	}else{
		bnum = curPage;
		if(curPage+(tapnum-1) <= page){
			ednu= curPage+(tapnum-1);	
		}else{
			ednu = curPage + (page-curPage);
			bnum = curPage - (tapnum-(page-curPage+1));
			if(bnum<=0) bnum=1;
		}
	}
	pagetag.length=0
	var temnum=1;
	for (var i = bnum; i <= ednu; i++) {
		$("#dqjm_" + temnum).html(i.toString());
		$("#dqjm_" + temnum).show();
		if(i== curPage) $("#dqjm_" + temnum).css({'background-color':'#0086ff'});
		pagetag.push(i);
		temnum++;
		
	}
	//displayPage(curPage);
    $("#btn0").html("第 " + curPage + "页" +"   共"+ page + "页 ");    // 显示当前多少页
    $("#sjzl").html("共计" + len + "条");        // 显示数据量  
}

$("#btn1").click(function firstPage(){    // 首页
    curPage=1;
	pagetag.splice(0,pagetag.length);
    for(var j=0;j<pageSize;j++){
		pagetag.push(j+1);
		$("#dqjm_" + (j+1)).html(j+1);
		if(j+1==curPage){
			$("#dqjm_" + (j+1)).css({'background-color':'#0086ff'});
		}else{
			$("#dqjm_" + (j+1)).css({'background-color':''});
		}
	}
	displayPage(null);
});
$("#btn2").click(function frontPage(){    // 上一页
	var tcpage= curPage-1; 
	var isint=false;
	var idx = -1;
	for(var i=0;i<pagetag.length;i++){
		if(pagetag[i]==tcpage){
			isint = true;
			idx = i;
			break;
		}
	}
	if(isint){
		curPage -=1;
		$("#pagenum > button").each(function (i){
			var sidx = parseInt(this.innerHTML);
			if(curPage != sidx) $(this).css({'background-color':''});
		});
		$("#dqjm_" + (idx+1)).css({'background-color':'#0086ff'});
	}else{
		if(tcpage>=1){
			curPage -=1;
			pagetag.pop();
			pagetag.splice(0,0,curPage);
			for(var j=0;j<pagetag.length;j++){
				$("#dqjm_" + (j+1)).html(pagetag[j]);
				if(pagetag[j]==curPage){
					$("#dqjm_" + (j+1)).css({'background-color':'#0086ff'});
				}else{
					$("#dqjm_" + (j+1)).css({'background-color':''});
				}
			}
		}else{
			curPage=1;
			alert("已经是第一页了");
			return;
		}
	}
	displayPage(null);
});
$("#btn3").click(function nextPage(){    // 下一页
	var tcpage= curPage+1; 
	var isint=false;
	var idx = -1;
	for(var i=0;i<pagetag.length;i++){
		if(pagetag[i]==tcpage){
			isint = true;
			idx = i;
			break;
		}
	}
	if(isint){
		curPage +=1;
		$("#pagenum > button").each(function (i){
			var sidx = parseInt(this.innerHTML);
			if(curPage != sidx) $(this).css({'background-color':''});
		});
		$("#dqjm_" + (idx+1)).css({'background-color':'#0086ff'});
	}else{
		if(tcpage<=page){
			curPage +=1;
			pagetag.shift();
			pagetag.push(pagetag[pagetag.length -1]+1);
			for(var j=0;j<pagetag.length;j++){
				$("#dqjm_" + (j+1)).html(pagetag[j]);
				if(pagetag[j]==curPage){
					$("#dqjm_" + (j+1)).css({'background-color':'#0086ff'});
				}else{
					$("#dqjm_" + (j+1)).css({'background-color':''});
				}
			}
		}else{
			curPage=page;
			alert("已经是最后一页了");
			return;
		}
	}
	displayPage(null);
});
$("#btn4").click(function lastPage(){    // 尾页
    curPage=page;
	pagetag.splice(0,pagetag.length);
	var temnum=1;
    for(var j=(page-tapnum+1);j<=page;j++){
		if(j<=0) continue;
		pagetag.push(j);
		$("#dqjm_" + temnum).html(j);
		if(j==curPage){
			$("#dqjm_" + temnum).css({'background-color':'#0086ff'});
		}else{
			$("#dqjm_" + temnum).css({'background-color':''});
		}
		temnum++;
	}
	displayPage(null);
});
$("#gopagebtn").click(function(){//点击跳转页
	var gonum = $("#gopage").val();
	if(gonum==null||gonum==''){
		alert("请输入跳转的页数！！");
		$("#gopage").val("");
		return;
	}
	var re = /^[1-9]+[0-9]*]*$/;
	if(!re.test(gonum)) {
	alert("请输入数字！！");
		$("#gopage").val("");
	return false;
	}
	if(parseInt(gonum)>page){
		alert("超过最大页数！！");
		$("#gopage").val("");
		return false;
	}
	curPage=parseInt(gonum);
	pagetag.splice(0,pagetag.length);
	var bnum=0;
	var ednu=0;
	if(curPage+(tapnum-1) <= page){
		bnum=curPage;
		ednu= curPage+(tapnum-1);	
	}else{
		ednu = page;
		bnum = curPage - (tapnum-(page-curPage+1));
		if(bnum<=0) bnum=1;
	}
	var temnum=1;
	for (var i = bnum; i <= ednu; i++) {
		$("#dqjm_" + temnum).html(i.toString());
		$("#dqjm_" + temnum).show();
		if(i== curPage){ 
			$("#dqjm_" + temnum).css({'background-color':'#0086ff'});
		}else{
			$("#dqjm_" + temnum).css({'background-color':''});
		}
		pagetag.push(i);
		temnum++;
		
	}
	$("#gopage").val("");
	displayPage(null);
});
$("#pagenum").on("click","button",function firstPage(){    // 点击页标签 
    curPage=parseInt(this.innerHTML);
    $(this).css({'background-color':'#0086ff'});
    $("#pagenum > button").each(function (i){
    	var sidx = parseInt(this.innerHTML);
    	if(curPage != sidx) $(this).css({'background-color':''});
    });
    document.getElementById("btn0").innerHTML="第 " + curPage + "页" +"   共"+ page + "页 ";        // 显示当前多少页
	displayPage(null);
});
function displayPage(callbak){
	$.ajax({
	  type: "POST",
	  dataType: "json", // 数据格式:JSON
	  url: '${base}/backstatistics/dicddetail.do',
	  data: {wid:curwid,dcid:curdcid,pageNo:curPage,statu:statu},
	  success: function (data) {
		  len = data.backdata.listlen;
		  var temp=[];
		if(data.backdata.ddlist != null){
			printdata = data.ddlist;
			$("#sample_editable_1 tbody").html("");
			$.each(data.backdata.ddlist,function(i,result){
				var tstr = "";
				if(result["status"]=='1'){
					tstr='<td style="color:blue">'+'已入库'+'</td>';
				}else if(result["status"]=='2'){
					tstr='<td style="color:green">'+"已出库"+'</td>';
				}else if(result["status"]=='3'){
					tstr='<td style="color:red">'+"已报废"+'</td>';
				}
				var item='<tr style="background-color:rgba(226, 223, 223);text-align:center;">'+
					'<td>'+result["cdname"]+'</td>'+
					'<td>'+result["tcrq"].substring(0,10)+'</td>'+
					'<td>'+result["no"]+'</td>'+
					'<td>'+result["zjnx"]+'</td>'+
					'<td>'+result["cgjg"]+'</td>'+
					tstr+
				    '</tr>';
            	$("#sample_editable_1 tbody").append(item);
            })
		}
		
		if(data.backdata.xaix != null){
			
			$("#sample_editable_2 tbody").html("");
			$.each(data.backdata.xaix,function(i,result){
				
				var item='<tr style="background-color:rgba(226, 223, 223);text-align:center;">'+
					'<td>'+(i+1)+'</td>'+
					'<td>'+result+'</td>'+
					'</tr>';
            	$("#sample_editable_2 tbody").append(item);
            	temp[i]=i+1;
            })
		}
		if(callbak!=null){
			callbak();
			if(data.backdata.listlen>0){
				chartData2["scale-x"]["values"]=temp;//data.backdata.xaix;
				chartData2["series"].length =0;
				chartData2["series"].push({"values":data.backdata.series.values,"text":data.backdata.series.text,"border-width":3})
				chartData2["title"]["text"]="";
				chartData2["title"]["text"]= data.backdata.series.text+"统计";
				zingchart.render({   
		            id: "chartDiv2",      
		            height: 300,         
		            width: 500,          
		            data: chartData2 
		        });
			}
		}
	  }
	});
};

function statusbtnclick(stat,param){
	//console.log("ata::"+stat)
	switch(stat){
		case 1:
			clickcangku(curwid);
		break;
		case 2:
		 displaystatics();
		break;
	}
};
var chartData = { 
        "type": "bar",   
        "series": [      
        ], 
        "scale-x":{ 
            "values":[], 
        }, 
        "title": { 
          "text":""
        }, 
        "legend":{ 
          
        } 
    };
var chartData2 = { 
        "type": "bar",   
        "series": [      
        ], 
        "scale-x":{ 
            "values":[], 
        }, 
        "title": { 
          "text":""
        }, 
        "legend":{ 
          
        } 
    };
</script>
</html>